<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" left-arrow @click-left="onClickLeft" :placeholder="true"
            :fixed="true" />

        <!-- 教师功能栏 -->
        <div style="display:flex" v-if="role">
            <van-field name="calendar" :value="createTime" label="日报日期" placeholder="点击选择日期"
                @click="showCalendar = true" style="width: 70%;" />
            <van-calendar v-model="showCalendar" @confirm="onConfirm" color="#1989fa" :min-date="minDate" />
            <van-dropdown-menu title="班级选择" style="width: 30%" active-color="#1989fa">
                <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
            </van-dropdown-menu>
        </div>

        <!-- 学生功能栏 -->
        <div style="display:flex" v-else>
            <van-dropdown-menu active-color="#1989fa" style="width: 50%;">
                <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
            </van-dropdown-menu>
            <van-cell title="写日报" is-link @click="showWriteDaily" style="width: 50%; text-align: center;" />
        </div>

        <div v-show="show == 1">
            <van-field v-model="content" rows="5" autosize label="工作概述:" type="textarea" maxlength="350"
                placeholder="请输入工作概述" show-word-limit />
            <van-field v-model="problem" rows="5" autosize label="存在的问题:" type="textarea" maxlength="350"
                placeholder="请输入存在的问题" show-word-limit />
            <van-button color="linear-gradient(to right, #7388a3, #97a6b5)" block style="margin-top: 10px;"
                @click="addDaily">
                提交日报
            </van-button>
        </div>


        <div v-show="show == 0">
            <div style="height: 10px;"></div>
            <div v-if="role">
                <van-cell-group inset v-for="(item, index) in dailys" :key="index">
                    <van-cell @click="backproblem(item)" :title="item.content" :label="item.problem" is-link
                        value="回复" />
                </van-cell-group>
            </div>
            <div v-else style="margin:0px auto;width:90%; ">
                <div class="van-card" v-for="(item, index) in studailys" :key="index"
                    style="background-color: #fff; border: 1px #1989fa solid;border-radius: 15px;">
                    <div class="van-card__header" style="margin: 5px auto;">
                        <div class="van-card__content">
                            <div>
                                <div class="van-card__title van-multi-ellipsis--l2"><span>工作概述:</span>{{ item.content }}
                                </div>
                                <div class="van-card__desc van-ellipsis"><span>存在问题:</span>{{ item.problem }}</div>
                                <div v-show="item.comment != null">
                                    <van-divider dashed :style="{ color: '#1989fa', borderColor: '#1989fa', }">
                                    </van-divider>
                                    <h3>评语:{{ item.comment }}</h3>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="van-card__footer">{{ item.createTime }}</div>
                </div>
            </div>





            <van-dialog v-model="showcomment" title="回复模块" show-cancel-button :beforeClose="beforeClose">
                <van-cell-group>
                    <van-field v-model="comment" label="回复内容" placeholder="" />
                </van-cell-group>
            </van-dialog>
        </div>
         <!-- 加载动画 -->
         <loading v-if="loadingStatus"></loading>
    </div>
</template>
<style>

</style>
<script>
import req from "../../request/request"
import { Toast } from 'vant';
export default {
    name: 'HomeDaily',
    data() {
        return {
            classId: 1,
            role: this.$store.state.user.userType == 1 ? true : false,
            minDate: new Date(2020, 0, 1),
            createTime: '',
            showCalendar: false,
            classInfos: [],
            className: '',
            dailys: [],
            studailys: [],
            comment: '',
            showcomment: false,
            item: '',
            show: 0,
            content: '',
            problem: '',
            
            // 加载动画
            loadingStatus: true,
        };
    },
    methods: {
        addDaily() {
            req({
                url: "addDaily",
                method: "POST",
                data: {
                    relationClassId: this.classId,
                    relationStudentId: this.$store.state.user.id,
                    content : this.content,
                    problem : this.problem,
                }
            }).then(res => {
                Toast("提交成功！")
                this.back()
            }).catch(err => {
                // console.log(err);
            })
        },

        showWriteDaily() {
            this.show = 1
        },
        // 获取班级列表
        getTraining() {
            req({
                url: "getTraining",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.practiceTitle = res.data.data[0].practiceTitle;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].practiceTitle;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    this.getStudentDailys()
                }
            }).catch(err => {
                // console.log(err);
            })
        },


        beforeClose(val, next) {
            if (val == "confirm") {
                req({
                    url: "updateDailyComment",
                    method: "POST",
                    data: {
                        id: this.item.id,
                        comment: this.comment
                    }
                }).then(res => {
                    // console.log(res);
                    this.getDailys()
                }).catch(err => {
                    // console.log(err);
                })
            }
            next();
        },
        backproblem(item) {
            // console.log(item)
            this.showcomment = true;
            this.comment = item.comment;
            this.item = item;
        },
        onConfirm(date) {
            this.createTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate() > 9 ? date.getDate() : "0" + date.getDate()}`;
            this.showCalendar = false;
            this.getDailys()
        },
        // 修改班级
        changeClass(res) {
            if (this.$store.state.user.userType == 1) {
                //根据班级id获取当前的所有任务信息
                for (var i = 0; i < this.classInfos.length; i++) {
                    if (this.classInfos[i].value == res) {
                        this.className = this.classInfos[i].text;
                        this.getDailys()
                    }
                }
            } else {
                for (var i = 0; i < this.classInfos.length; i++) {
                    if (this.classInfos[i].value == res) {
                        this.practiceTitle = this.classInfos[i].text;
                        this.getStudentDailys()
                    }
                }
            }

        },
        // 获取学生日报内容
        getStudentDailys() {
            req({
                url: "getStudentDailys",
                method: "POST",
                data: {
                    relationStudentId: this.$store.state.user.id,
                    relationClassId: this.classId
                }
            }).then(res => {
                // console.log(res.data.data)
                this.studailys = res.data.data
            }).catch(err => {
                // console.log(err);
            })
        },
        // 获取日报内容
        getDailys() {
            req({
                url: "getDailys",
                method: "POST",
                data: {
                    createTime: this.createTime,
                    relationClassId: this.classId
                }
            }).then(res => {
                // console.log(res.data.data)
                this.dailys = res.data.data
            }).catch(err => {
                // console.log(err);
            })
        },
        //教师端获取日报内容
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    //根据班级id获取当前的所有任务信息
                    this.getDailys()
                }
            }).catch(err => {
                // console.log(err);
            })
        },
        onClickLeft() {
            if (this.show == 0) {
                Toast("已经是第一页啦！")
            } else {
                this.show = 0;
                this.content = ''
                this.problem = ''

            }

        },
    },
    computed: {
    },
    mounted() {
        var now = new Date();
        this.createTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate() > 9 ? now.getDate() : "0" + now.getDate()}`;
        if (this.$store.state.user.userType == 1) {
            this.getClassInfo()
        } else {
            this.getTraining()
        }
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);

    },
}
</script>